import React, { PureComponent } from 'react';
import { StyleSheet, View, Text } from 'react-native';
import color from '../../widget/color';
type Props = {
  Length?: Number,
  Active?: Number
}
type State = {

}

class HomeMenuPagination extends PureComponent<Props, State> {
  constructor(props) {
    super(props);
    this.state = {

    };
  }

  render () {
    let { Length, Active } = this.props
    Active = Active || 0
    let bulletArr = []
    for (let i = 0; i < Length; i++) {
      bulletArr.push(
        <View style={styles.bullet} key={i}>
          <View style={Active == i && styles.active}>

          </View>
        </View>
      )
    }
    return (
      <View style={styles.pagination}>
        {
          bulletArr
        }
      </View>
    );
  }
}
const bulletSize = 10
const styles = StyleSheet.create({
  pagination: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'center',
    alignItems: 'center'
  },
  bullet: {
    width: bulletSize,
    height: bulletSize,
    borderRadius: bulletSize,
    backgroundColor: '#cccccc',
    margin: 8
  },
  active: {
    width: bulletSize,
    height: bulletSize,
    backgroundColor: color.primary,
    borderRadius: bulletSize
  }
})
export default HomeMenuPagination;